<template>
	<div class="conbox" id="mysission">
		<div class="task_top">
			<div class="top_content">
				<p>我的积分 <span>{{point_balance}}</span></p>
				<a @click="cashout" v-if="userInfo.role_id == 1 || userInfo.role_id == 2">去充值></a>
			</div>
		</div>
		<ul class="task_list">
			<li v-for="(item,index) in list" :key="index"
				v-if="((userInfo.role_id == 2)&&(index>0))||(userInfo.role_id !== 2)">
				<div class="task_left">
					<img :src="item.img" alt="">
				</div>
				<div class="task_modile">
					<p class="share_title">{{item.title}} <span>+{{item.integral}}积分</span></p>
					<P>{{item.sharedesc}}</P>
				</div>
				<div class="task_btn task_ling" v-if="false">领取</div>
				<div class="task_btn task_doing" v-if="item.status==1" @click="godoings(index,item.name)">去完成</div>
				<div class="task_don" v-if="item.status==2">
					<img :src="constant.imgUrl +'design/task-done.png'" alt="">
				</div>
			</li>
		</ul>
		<uniPopup v-model="editalert" class="editalert">
			<a class="closemask" @click="close(1)">
				<img :src="constant.imgUrl +'design/addfriclose.png'" alt="">
			</a>
			<div class="headecontent">
				<img :src="constant.imgUrl +'publicicon/icon_saveimg.png'" alt="" class="alert_img">
				<p class="success">领取成功</p>
				<p class="jifen">积分 <span>+10</span></p>
			</div>
			<div class="savestatus">
				<a class="backindex" @click="close(2)">继续领取</a>
			</div>
		</uniPopup>
		<uniPopup v-model="demomask" class="casemask" ref="casearticle" type="center" maxHeight="1000rpx" >
			<div class="mask_top">
				<img :src="constant.imgUrl +'getguest/icon_casemask.png'" alt="" v-if="masktype==1">
				<img :src="constant.imgUrl +'getguest/icon_articlemask.png'" alt="" v-if="masktype==2">
			</div>
			<div class="maskbtn" @click="onlygodoing">去完成</div>
		</uniPopup>
		<v-sharePoster ref="sharePoster"></v-sharePoster>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { getmymission } from '@/api/payment'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import SharePoster from '@/pages/components/sharePoster'

export default {
	name: 'myMission',
	components: {
		uniPopup,
		'v-sharePoster': SharePoster
		/* 'v-registerNow': RegisterNow,*/
	},
	data() {
		return {
			constant: this.$constant,
			list: [
				{
					img: this.$constant.imgUrl + 'getguest/menu_icon_1.png',
					title: '分享获客案例',
					sharedesc: '每次分享设计案例到微信朋友圈或微信群',
					integral: 10,
					status: 1
				},
				{
					img: this.$constant.imgUrl + 'getguest/menu_icon_2.png',
					title: '分享获客文章',
					sharedesc: '每次分享攻略文章到微信朋友圈或微信群',
					integral: 10,
					status: 1
				},
				{
					img: this.$constant.imgUrl + 'getguest/icon_card.png',
					title: '分享主页名片',
					sharedesc: '每次分享名片到微信朋友圈或微信群',
					integral: 10,
					status: 1,
					name: ''
				},
				{
					img: this.$constant.imgUrl + 'getguest/icon_shopdata.png',
					title: '完善主页资料',
					sharedesc: '去资料编辑页完善店铺信息',
					integral: 30,
					status: 1,
					name: '/pages/persondata/index'
				},
				/*  {
                          img:require('../../assets/image/getguest/icon_carded.png'),
                          title:'完成用户认证',
                          sharedesc:'轻松三步完成认证换豪礼',
                          integral:50,
                          status:1
                      },*/
				{
					img: this.$constant.imgUrl + 'getguest/icon_vip.png',
					title: '成为VIP特权用户',
					sharedesc: '成功开通VIP获得高额返佣',
					integral: 100,
					status: 1,
					name: '/pages/admin/vip/vipGuide'
				},
				{
					img: this.$constant.imgUrl + 'getguest/icon_invation.png',
					title: '邀请其他用户成为VIP',
					sharedesc: '成功开通VIP获得佣金',
					integral: 100,
					status: 1,
					name: '/pages/getGuest/inviteShop'
				}
			],
			editalert: false,
			demomask: false,
			point_balance: '',
			masktype: 1,
			role_id: '',
			owner_user_id: ''
		}
	},
	computed: {
		userRegions() {
			return this.$store.state
		},
		...mapGetters({ userinfo: 'getBasicUser' }),
		...mapState({
			loginInfo: state => state.login.loginInfo
		})
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
	},
	onShow() {
		this.demomask = false
	},
	mounted() {
		this.getsharestatus()
	},
	methods: {
		getsharestatus() {
			getmymission().then(res => {
				if (res.status === 'success') {
					this.point_balance = res.data.point_balance
					let list = res.data.task_list.data
					for (let i in list) {
						this.list[i].integral = list[i].points
						this.list[i].status = list[i].state
					}
				} else {
					uni.showToast(res.errors.message)
				}
			})
		},
		close(type) {
			this.editalert = false
		},
		godoings(index, name) {
			if (index == 0) {
				this.masktype = 1
			} else if (index == 1) {
				this.masktype = 2
			}
			if (index == 0 || index == 1) {
				this.demomask = true
				this.$refs.casearticle.open()
			}
			if (index == 2) {
				this.$refs.sharePoster.showMask()
			}
			if (name) {
				console.log(name, this.owner_user_id)
				uni.navigateTo({
					url: `${name}?owner_user_id=${this.owner_user_id}`
				})
			}
		},
		cashout() {
			uni.navigateTo({  // 积分充值页面
				url: `/pages/integral/integralPay?owner_user_id=${this.owner_user_id}&sourceinintegral=${this.point_balance}`
			})
		},
		onlygodoing() {
			if (this.masktype == 1) {
				uni.navigateTo({
					url: `/pages/getGuest/winCase?${this.commonJS.queryData({
						owner_user_id: this.user_id
					})}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/getGuest/winArticle?${this.commonJS.queryData({
						owner_user_id: this.user_id
					})}`
				})
			}
			this.$refs.casearticle.close()
		}
	}
}
</script>

<style scoped lang="scss">

	.task_top {
		width: 100%;
		height: 248px;
		position: relative;
		background: url($imgUrl+'getguest/icon_mytask.png');
		background-size: cover;
		.top_content {
			padding: 40px 30px;
			font-size: 24px;
			color: #3A1B04;
			p {
				float: left;
				width: 40%;
				span {
					font-size: 48px;
					margin-left: 20px;
				}
			}
			a {
				float: right;
				width: 120px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 20px;
				/* background: url(../../assets/image/login/right.png) right center / 15px 24px no-repeat;*/
				border: 2px solid #3A1B04;
				margin-top: 10px;
			}
		}
	}

	.task_list {
		position: absolute;
		width: 94%;
		left: 3%;
		top: 10%;
		li {
			width: 100%;
			height: 160px;
			margin-bottom: 20px;
			background: white;
			border-radius: 20px;
			.task_left {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				float: left;
				margin-top: 40px;
				margin-left: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.task_modile {
				float: left;
				color: #999999;
				font-size: 24px;
				margin-left: 15px;
				margin-top: 40px;
				.share_title {
					color: #333333;
					font-size: 26px;
					margin-bottom: 10px;
					span {
						color: #FF6900;
					}
				}
			}
			.task_btn {
				margin-top: 60px;
				margin-right: 20px;
				float: right;
				width: 128px;
				height: 50px;
				border-radius: 25px;
				text-align: center;
				line-height: 50px;
				border-radius: 25px;

			}
			.task_ling {
				color: white;
				background: linear-gradient(90deg, rgba(251, 95, 77, 1), rgba(249, 47, 45, 1));
			}
			.task_doing {
				color: #3A1B04;
				background: #FFD11A;
			}
			.task_don {
				float: right;
				margin-right: 32px;
				width: 104px;
				height: 104px;
				margin-top: 28px;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
					float: left;
				}
			}
		}
	}
	#mysission .casemask /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		width: 96%;
		height: 100%;
		max-width: 96%;
		min-height: 100%;
		background: none;
	}
	.editalert {
		height: 367px;
		width: 560px;
		overflow-y: inherit;
		border-radius: 20px;
		background: white;
	}

	.headecontent {
		margin: 0 auto;
	}

	.headecontent .alert_img {
		width: 150px;
		height: 150px;
		float: left;
		margin-left: 37%;
		margin-top: -50px;
		margin-bottom: 20px;
	}

	.headecontent p {
		font-size: 24px;
		clear: both;
		text-align: center;
	}

	.headecontent .success {
		color: #333333;
		font-size: 38px;
		font-weight: bold;
	}

	.headecontent .jifen {
		color: #FF6900;
		span {
			font-size: 36px;
		}
	}

	.savestatus {
		width: 100%;
		height: auto;
		margin-top: 30px;
		margin-left: 40px;
	}

	.savestatus a {
		float: left;
		width: 230px;
		height: 90px;
		color: #3A1B04;
		margin-left: 21%;
		font-size: 30px;
		text-align: center;
		line-height: 90px;
		border-radius: 45px;
	}

	.continue {
		background: #f5f5f5;
	}

	.backindex {
		background: #ffd11a;
		margin-left: 20px;
	}

	.casemask {
		width: 100%;
		height: 100%;
		.mask_top {
			width: 100%;
			height: 1022px;
			img {
				width: 100%;
				height: 95%;
				margin-top: 5%;
			}
		}
		.maskbtn {
			width: 490px;
			height: 90px;
			font-size: 32px;
			color: #3A1B04;
			text-align: center;
			line-height: 90px;
			background: #FFD11A;
			border-radius: 45px;
			margin-left: 10%;
			margin-top: 5%;
		}
	}
</style>
